import React, { Component } from 'react'
import { Layout, Dropdown, Menu, Icon } from 'antd'
import styles from './index.css'

const { Header } = Layout;

export default class CommonHeader extends Component {
  constructor(props) {
    super(props)
  }

  onClick({ key }) {
    if (key === 'info') {
      this.personInfo()
    } else if (key === 'logout') {
      this.props.logout()
    }
  }

  personInfo() {
    console.log('person info')
  }

  render() {
    let menu = <Menu onClick={e => this.onClick(e)}>
      <Menu.Item key="info">个人信息</Menu.Item>
      <Menu.Item key="logout">退出登陆</Menu.Item>
    </Menu>
    return (
      <Header className={styles.header}>
        <div className={styles.logo}>Simple Things</div>
        <div className={styles.dropdown}>
          <Dropdown overlay={menu}>
            <a href="javascript:;">
              欢迎您，小六
              <Icon type="down" className={styles.iconDown} />
            </a>
          </Dropdown>
        </div>
      </Header>
    )
  }
}